<template>
    <div>
        <el-drawer :visible.sync="showDrawer" title="财物列表" append-to-body destroy-on-close :before-open="open" :before-close="close" size="60%">
            <template>
                <el-row :gutter="20" style="padding:30px;">
                    <el-col :span="8">
                        <!--财物分类-->
                        <div class="head-container">
                        <el-input v-model="classifyName" placeholder="请输入分类名称" clearable size="small" prefix-icon="el-icon-search"
                            style="margin-bottom: 20px" />
                        </div>
                        <div class="head-container">
                        <el-tree :data="classifyOptions" :props="defaultProps" :expand-on-click-node="false" accordion
                            :filter-node-method="filterNode" ref="tree" @node-click="handleNodeClick" />
                        </div>
                    </el-col>
                    <el-col :span="16">
                      <div class="head-container">
                        <el-col :span="10">
                          <el-input v-model="queryParams.pno" placeholder="请输入物品编号" clearable size="small" prefix-icon="el-icon-search"
                                    style="margin-bottom: 20px" />
                        </el-col>
                        <el-col :span="10">
                          <el-input v-model="queryParams.taskNo" placeholder="请输入订单编号" clearable size="small" prefix-icon="el-icon-search"
                                    style="margin-bottom: 20px" />
                        </el-col>
                        <el-col :span="4"><el-button type="primary" size="small" @click="pnoSearchClick()">搜索</el-button></el-col>
                      </div>
                        <el-table v-loading="loading" :data="propertyList" @selection-change="handleSelectionChange" border stripe>
                            <el-table-column type="selection" width="55" align="center" />
                            <el-table-column label="编号" align="center" prop="pno" />
                            <el-table-column label="名称" align="center" prop="name" />
                            <el-table-column label="仓库" align="center" prop="store" />
                            <el-table-column label="库区" align="center" prop="area" />
                            <el-table-column label="库位" align="center" prop="locator" />
                        </el-table>
                        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                        @pagination="getList" />
                    </el-col>
                </el-row>
                <div style="position:absolute;bottom:30px;right:30px">
                    <el-button type="primary" @click="submit()">确定</el-button>
                    <el-button @click="close()">取消</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>

<script>
    import {treeselect} from "@/api/oms/classify"
    import {listProperty} from "@/api/oms/property";
    import {propertyDatas} from '@/api/center/index.js'
    export default {
        name:"select-property",
        emits:['handleSelected'],
        props:{

        },
        data(){
            return{
                showDrawer:false,
                classifyName:undefined,
                pno:undefined,
                // 遮罩层
                loading: true,
                 // 总条数
                total: 0,
                propertyList:[],
                classifyOptions:[],
                defaultProps: {
                    children: "children",
                    label: "label"
                },
                dataList:[],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    name: undefined,
                    pno: undefined,
                    taskNo: undefined,
                    classifyId: undefined,
                    rfid: undefined,
                    locatorId: undefined,
                    status: undefined,
                    delFlag: undefined,
                    storeId: undefined,
                    areaId: undefined
                },
            }
        },
        watch:{

        },
        created(){
            this.getList()
            this.getTreeselect()
        },
        methods:{
            /** 查询财物列表 */
            getList() {
                this.loading = true;
                propertyDatas(this.queryParams).then(response => {
                this.propertyList = response.rows;
                this.total = response.total;
                this.loading = false;
                });
            },
            /** 查询分类下拉树结构 */
            getTreeselect() {
                treeselect().then(response => {
                this.classifyOptions = response.data;
                });
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            open(){
                this.showDrawer = true;
            },
            close(){
                this.showDrawer = false;
            },
            // 筛选节点
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },
            // 节点单击事件
            handleNodeClick(data) {
                this.queryParams.classifyId = data.id;
                this.handleQuery();
            },
            pnoSearchClick(){
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.dataList = selection;
            },
            submit(){
                this.$emit('handleSelected',this.dataList);
                this.showDrawer = false;
            }
        }
    }

</script>

<style></style>
